<template>
	<view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>姓名</text>
				<input class="fs13" type="text" value="" @blur="idname" placeholder="李大钊" />
			</view>
		</view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>证件号</text>
				<input class="fs13"  @blur="idsfz" type="idcard" placeholder="身份证输入键盘"/>
			</view>
		</view>
		<view class="w90" style="border-bottom: 0px ">
			<view class="SMpd fs13">
				<h5>上传你的证件</h5>
				<view class="SMimgs" style="margin-top: 72rpx;">
					<image :src="idcard_image_is" @tap="selectImg1"  mode="widthFix"></image>
					<view class="fs12" style="margin-top:28rpx;color: rgba(171,171,171,1);text-align: center;">身份证正面</view>
				</view>
				
				<view class="SMimgs" style="margin-top: 100rpx;">
					<image :src="idcard_image_the" @tap="selectImg2" mode="widthFix"></image>
					<view class="fs12" style="margin-top:28rpx;color: rgba(171,171,171,1);text-align: center;">身份证反面</view>
				</view>
			</view>
		</view>
		<view class="SMtj fs14" @click="tijiao"> 
			提交
		</view>
	</view>
</template>

<script>
	var _self
	import { mapState} from 'vuex'
	export default {
		data() {
			return {
				username:'',
				idcard_no:'',
				idcard_image_is : '../../static/iconsfz.png',
				idcard_image_the : '../../static/iconb.png',
			}
		},
		onLoad:function(){
			_self = this;
		},
		computed:{
			...mapState(['token'])
		}
		,
		methods: {
			selectImg1 : function() {
				uni.chooseImage({
					success:function(res){
						_self.idcard_image_is = res.tempFilePaths[0];
						console.log(_self.idcard_image_is)
					}
				})
			},
			selectImg2 : function() {
				uni.chooseImage({
					count:1,
					success:function(res){
						_self.idcard_image_the = res.tempFilePaths[0];
						console.log(_self.idcard_image_the)
					}
				})
			},
			idname : function(e){
				this.username = e.target.value
				var regName =/^[\u4e00-\u9fa5]{2,4}$/;
				if(!regName.test(this.username)){
				  alert('真实姓名填写有误');
				  return false;
				}
				console.log(this.username)
			},
			idsfz : function(e){
				this.idcard_no = e.target.value
				var regIdNo = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(this.idcard_no == 18 && !regIdNo.test(this.idcard_no)){
				 alert('身份证号填写有误');
				 return false;
				}
				console.log(this.idcard_no)
			},
			tijiao: function(){
				this.$request('api/user/auth',{
					username:this.username,
					idcard_no:this.idcard_no,
					idcard_image_is:this.idcard_image_is,
					idcard_image_the:this.idcard_image_the
					},'POST',{Authorization:this.token,}).then(res => {
						console.log(res)
					})
				// console.log(this.token,this.username,this.idcard_no,this.idcard_image_is,this.idcard_image_the)
			}
		}
	}
</script>

<style>
.bgf8{
		width: 100vw;
		height: 100vh;
		background: #F8F8F8;
	}
	.title{
		position: relative;
		background: #FFFFFF;
	}
	.returnh{
		 width: 20px;
		 height: 20px;
		 position: absolute;
		 left: 34rpx;
		 top: 25rpx;
	}
	.title>text{
		display: block;
		color: rgba(51,51,51,1);
		text-align: center;
		line-height: 88rpx;
	}
	.w90{
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid rgba(216,216,216,1);
	}
	.SMpd{
		padding: 50rpx 0 36rpx 0;
		position: relative;
	}
	.SMpd>input{
		width: 400rpx;
		text-align: right;
		position: absolute;
		right: 0;
		top: 45rpx;
	}
	.SMimgs{
		width: 358rpx;
		height: 248rpx;
		margin: 0 auto;
	}
	.SMimgs image{
		width: 358rpx;
		height: 248rpx!important;
	}
	.SMtj{
		width: 466rpx;
		height: 76rpx;
		text-align: center;	
		line-height: 76rpx;
		color:rgba(255,255,255,1);
		background: rgba(36,188,129,1);
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
